<template>
<div class="stuInfoDiv">
  <table class='stuInfo'  border="1">
    <tr>
      <td>学号</td>
      <td>{{studentInfo.studentId}}</td>
      <td>姓名</td>
      <td>{{studentInfo.studentName}}</td>
      <td rowspan="3" width="180" height="200">
        <img :src="studentInfo.studentPhoto" width="180" height="200" />
      </td>
    </tr>
    <tr>
      <td>报考专业</td>
      <td>{{studentInfo.major.majorName}}</td>
      <td>性别</td>
      <td>{{studentInfo.studentSex}}</td>
    </tr>
    <tr>
      <td>出生年月</td>
      <td>{{studentInfo.studentBirth | dateFormat }}</td>
      <td>民族</td>
      <td>{{studentInfo.studentNation}}</td>
    </tr>
    <tr>
      <td>身份证号</td>
      <td colspan="4">{{studentInfo.studentIdcard}}</td>
    </tr>
    <tr>
      <td>学历</td>
      <td>{{studentInfo.studentEducation}}</td>
      <td>邮箱</td>
      <td colspan="2">{{studentInfo.studentEmail}}
          <el-button type="primary"  size="small" @click.native="toUpdateEmail = true">修改</el-button>
      </td>
    </tr>
    <tr>
      <td>家庭住址</td>
      <td colspan="4">{{studentInfo.studentAddress}}</td>
    </tr>
    <tr>
      <td>毕业院校</td>
      <td>{{studentInfo.studentGraduate}}</td>
      <td>联系电话</td>
      <td colspan="2">{{studentInfo.studentPhone}}
            <el-button type="primary"  size="small" @click.native="toUpdatePhone = true">修改</el-button>
      </td>
    </tr>
  </table>

<!-- 修改邮箱地址 -->
<el-dialog title="修改邮箱地址" :visible.sync="toUpdateEmail">
  <el-form :model="form">
    <el-form-item label="请输入邮箱：" :label-width="formLabelWidth">
      <el-input v-model="form.newEmail" auto-complete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="toUpdateEmail = false">取 消</el-button>
    <el-button type="primary" @click.native="updateEmail">确 定</el-button>
  </div>
  </el-dialog>
  <!-- 修改联系方式弹出框 -->
  <el-dialog title="修改联系方式" :visible.sync="toUpdatePhone">
    <el-form :model="form">
      <el-form-item label="请输入联系电话：" :label-width="formLabelWidth">
        <el-input v-model="form.newPhone" auto-complete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="toUpdatePhone = false">取 消</el-button>
      <el-button type="primary" @click.native="updatePhone">确 定</el-button>
    </div>
    </el-dialog>

</div>

</template>
<style scoped>
  .stuInfo{
    width: 800px;
    border-width: 10px;
    border-spacing: 0;
    border-color: lightgray;
  }
  .stuInfo tr{
    width: 100px;
    height: 60px;
    text-align: center;
  }
  .stuInfoDiv{
    text-align: center;
    width: 800px;
    height: 600px;
    margin: 100px auto;
  }


</style>
<script>

  import {studentSelfInfo,updateStuInfo} from '@/axios/api'   //注意此处严格的格式
  import {formatDate} from '@/common/js/date.js'
  export default {
    data() {
      return {
          studentInfo:{
            major:''
          },
          toUpdateEmail: false,
          toUpdatePhone: false,
          form: {
            newEmail:'',
            newPhone:''
          },
          formLabelWidth: '140px',
      }
    },
    filters: {
      dateFormat:(date) => {
        if (date == undefined) {
          return "";
        }
        return formatDate(new Date(date),'yyyy-MM-dd');
      }
    },
    methods: {
      getStuMsg:function(){
        studentSelfInfo().then (res => {
          this.studentInfo = res.resData;
        })
      },
      updateEmail:function(){
         this.toUpdateEmail = false;
         // console.log(this.form.newEmail);
         let param = {newEmail: this.form.newEmail}
          updateStuInfo(param).then (res => {
            if(res.status == 200){
              this.$message({
                showClose: true,
                message: '修改成功，请查看',
                type: 'success'
              });
              this.getStuMsg();
            }else{
              this.$message({
                showClose: true,
                message: res.message,
                type: 'error'
              });
            }
          });
      },
      updatePhone:function(){
         this.toUpdatePhone = false;
          let param = {newPhone: this.form.newPhone}
          updateStuInfo(param).then (res => {
            if(res.status == 200){
              this.$message({
                showClose: true,
                message: '修改成功，请查看',
                type: 'success'
              });
              this.getStuMsg();
            }else{
              this.$message({
                showClose: true,
                message: res.message,
                type: 'error'
              });
            }
          });
      },
    },

    //浏览器刷新则会立即加载
    mounted() {
      this.getStuMsg();
    }

  }
</script>
